<template>
  <div class="home-banner">
    <XtxCarousel :sliders="list" />
  </div>
</template>
<script>
import { homeBanner } from '@/api/home'
import { ref } from 'vue'
import { useStore } from 'vuex'
export default {
  name: 'HomeBanner',
  setup () {
    const list = ref([])
    // homeBanner().then(res => {
    //   list.value = res.result
    //   console.log('轮播图：', res)
    // })
    const store = useStore()
    store.dispatch('home/getBannerList').then(res => {
      list.value = res
    })
    return { list }
  }
}
</script>
<style scoped lang="less">
// scoped:只管当前组件与子组件最外层,可以看到的都可管到
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
  //   ::v-deep vue2推荐写法   :deep(需要穿透的css) vue3推荐写法
  //   ::v-deep .prev {
  //     left: 270px !important;
  //   }
  :deep(.prev) {
    left: 270px !important;
  }
}
</style>
